<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>查看公告</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="static/css/style.css">
	</head>

	<body>
		<div class="container">
			<style>
				.layui-table .laytable-cell-checkbox {
					margin: 0px 20px;
				}
				
				.demoTable button:nth-of-type(2) {
					margin-left: 15px!important;
				}
		.layui-table-cell {
			height: auto;
		}
			</style>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>系统公告</legend>
			</fieldset>

			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">标题</label>
						<div class="layui-input-inline namebox">
							<input type="text" class="layui-input title" id="test2">
						</div>

						<label class="layui-form-label ">发布时间</label>
						<div class="layui-input-inline namebox">
							<input type="text" class="layui-input addtime" id="test1" readonly="readonly">

						</div>

						<label class="layui-form-label"></label>
						<div class="layui-input-inline namebox"></div>
						<button class="layui-btn seek" lay-submit lay-filter="formDemo" id="search" type="button">搜索</button>

					</div>

				</div>

			</form>
			<div class="layui-btn-group demoTable">
				<button type="button" class="layui-btn layui-btn-danger delet" data-type='getCheckData'><i class="layui-icon"></i>批量删除</button>
				<button type="button" class="layui-btn layui-btn-danger xinzeng" lay-event="del">发布公告</button>
			</div>

			<table id="demo" lay-filter="test"></table>
		</div>
		<!--<div id="test1"></div>-->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/common.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
		<script type="text/html" id="barDemo">
			<!--<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="query">查看详情</a>-->
			<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="update">修改公告</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="del">删除公告</a>
		</script>
		<script type="text/html" id="barDemo2">
			<img src="{{d.image}}" />
		</script>
		<script>
			//时间控件
			layui.use('laydate', function() {
				var laydate = layui.laydate;
				//执行一个laydate实例
				laydate.render({
					elem: '#test1' //指定元素
				});
			});

			var list;
			var title = $('.title').val();
			//				var addtime;
			var addtime = $('.addtime').val();
			var laypage;
			$(function() {
				layui.use(['form', 'laypage'], function() {
					userlist("", "");
					form = layui.form;
					laypage = layui.laypage;

					form.on('select(title)', function(data) {
						title = title;
						console.log(title);
						userlist($('.title'), $('.addtime'));
					});
					form.on('select(addtime)', function(data) {
						addtime = data.value;
						console.log(addtime);
						userlist($('.title'), $('.addtime'));
					});

				})

				$("#search").click(function() {
					var title = $(".title").val();
					var addtime = $(".addtime").val();
					userlist(title, addtime);
				})
			})

			function userlist(title, addtime) {

				$.ajax({
					type: "POST", //提交方式 
					url: baseurl + "/notice/querySystem", //baseurl + "/com/users", //路径 
					dataType: 'json',
					data: {
						title: title,
						time: addtime,
						/*,address: address,*/
						/*userType: userType,
						vip: vip,*/
					}, //数据，这里使用的是Json格式进行传输 
					success: function(data) { //返回数据根据结果进行相应的处理 
						console.log(data)
						list = data.data;
						layui.use('table', function() {
							var table = layui.table;
							//第一个实例
							table.render({
								elem: '#demo',
								id: 'testReload',
								toolbar: '#toolbarDemo',
								data: list, //数据接口
								page: true, //开启分页
								totalRow: true, //开启合计行
								limit: 10,
								limits: [10],
								cols: [
									[{
										type: 'checkbox',
										width: 20
									}, {
										field: 'id',
										title: 'ID',
										width: 200,
										align: 'center',
									}, {
										field: 'title',
										title: '标题',
										width: 200,
										align: 'center',
									}, {
										field: 'content',
										title: '内容',
										align: 'center',
										width: 200,
									}, {
										field: 'image',
										title: '公告图片',
										templet: '#barDemo2',
										width: 200,
										align: 'center',
									}, {
										field: 'time',
										title: '发布时间',
										width: 200,
										sort: true,
										align: 'center',
									}, {
										title: '操作',
										width: 200,
										toolbar: '#barDemo',
										align: 'center',
									}]
								]
							});

							//批量删除
							$(".delet").click(function() { //获取选中的数据
								console.log(table.checkStatus("testReload"))
								var idList = [];
								var checkStatus = table.checkStatus("testReload"),
									data = checkStatus.data;
								if(data == "") {
									layer.msg('至少也得选一个吧', {
										icon: 2
									});
									return;
								}

								for(var i = 0; i < data.length; i++) {
									idList.push(data[i].id);
								}
								layer.confirm('确认要删除吗？' + idList.join(), function(index) {
									$.ajax({
										type: "post",
										url: baseurl + "/notice/delecteNotice",
										data: {
											"id": idList.join()
										},
										success: function(data) {
											console.log(idList.join())
											layer.msg('删除成功!', {
												icon: 1
											});
											$(".layui-form-checked").not('.header').parents('tr').remove();
										}
									});
								})
							})

							//新增
							$(".xinzeng").click(function() { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
								layer.open({
									type: 2,
									title: '发布公告',
									maxmin: true,
									shadeClose: true, //点击遮罩关闭层
									area: ['800px', '800px'],
									content: 'addannment.html' //?userId='+ userId
								});
							});

							laypage.render({
								elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
									,
								count: data.data.total, //数据总数，从服务端得到
								jump: function(obj, first) { //jump 跳转
									//obj包含了当前分页的所有参数，比如：
									console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
									console.log(obj.limit); //得到每页显示的条数

									//首次不执行
									if(!first) {
										//do something
										$.ajax({
											type: "POST", //提交方式 
											url: baseurl + "/com/users", //路径 
											dataType: 'json',
											data: {
												//userId: localStorage.getItem("userId"),
												//												title: title,
												//												addtime: addtime,
												//												address: address,
												//												page: obj.curr
											}, //数据，这里使用的是Json格式进行传输 
											success: function(data) {
												if(data.meta.code == 200) {
													table.reload('testReload', {
														data: data.data.list
													});
												}
											}
										})
									}
								}
							});
							//点击查看详情 跳出
							table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
								var data = obj.data; //获得当前行数据

								var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
								var tr = obj.tr; //获得当前行 tr 的DOM对象
								var announcementId = obj.data.id;
								if(layEvent === 'del') {
									layer.confirm('确认要删除吗？' + announcementId, function(index) {
										$.ajax({
											type: "post",
											url: baseurl + "/notice/delecteNotice",
											data: {
												id: announcementId,
											},
											success: function() {
												location.reload();
											}
										});
									})
								} else {
									layer.open({
										type: 2,
										title: '修改公告',
										maxmin: true,
										shadeClose: true, //点击遮罩关闭层
										area: ['800px', '800px'],
										content: 'upannment.html?id=' + announcementId //?userId=+ userId
									});
								}
							});
						});
					}
				});
			}
		</script>
	</body>

</html>